<template>
	<view class="box">
		<nav-bar :isSearch="false" :menuData="menuList" :isBack="isBack" @onback="onback">

			<template slot="title">
				<view> </view>
			</template>
			<template slot="content">设备报装</template>
		</nav-bar>

		<view class="panel">
			<view class="form qr-form">

				<view class="form-inputs">

					<view class="item">
						<view class="title">设备IMEI：</view>
						<input class="input" placeholder="扫码获取" name="imei" v-model="dataInfo.imei"></input>
					</view>


				</view>
				<view class="form-btns ">

					<button class="btn" @tap="qr">扫码</button>

				</view>

			</view>


		</view>



		<view class="panel">
			<view class="form">

				<view class="form-inputs">
					<view class="item">
						<view class="title">经度：</view>
						<input class="input" placeholder="定位获取" v-model="dataInfo.longitude" disabled></input>
					</view>
					<view class="item">
						<view class="title">纬度：</view>
						<input class="input" placeholder="定位获取" v-model="dataInfo.latitude" disabled></input>
					</view>
					<view class="item">
						<view class="title">地址信息：</view>
						<textarea class="area" placeholder="定位获取" name="address" v-model="dataInfo.address"></textarea>

					</view>
				</view>
				<view class="form-btns">


					<button class="btn" @tap="locate">定位</button>


				</view>

			</view>


		</view>


		<view class="btns">

			<button @tap="submitInstall" class="cu-btn link-btn margin-tb-sm lg" :loading="loading">报装</button>

		</view>

	</view>
</template>

<script>
	import NavBar from '../component/NavBar'
	import menuData from '../../mock/menu-data.js'

	const toast = (title) => {
		uni.showToast({
			title
		})
	}

	const app = getApp();

	export default {
		data() {
			return {
				menuList: menuData,
				dataInfo: {

					// imei: '869505046526669',
					imei: '',
					longitude: 0,
					latitude: 0,
					address: '',

				},

			}

		},

		components: {
			NavBar,

		},
		onLoad(options) {

			this.menuList = menuData;

		},

		methods: {


			onback() {
				uni.navigateBack({
					delta: 1
				})
			},

			qr() {
				let self = this;
				uni.scanCode({
					scanType:['barCode','qrCode'],
					success: function(res) {
						Object.assign(self.dataInfo, {imei:res.result});
					},
					fail: function(err) {
						//self.dataInfo.deviceId = ''
						self.dataInfo.imei = ''
						toast("扫码失败" + err.errMsg)


					}
				});
			},
			locate() {
				let self = this;
				wx.chooseLocation({
					success: function(res) {
						console.log(res)
						self.dataInfo.longitude = res.longitude;
						self.dataInfo.latitude = res.latitude;
						self.dataInfo.address = res.address;

					},
					fail: function(err) {

						toast("定位失败" + err.errMsg)

					}
				})
			},
			saveDeviceInfo(){
				const key = this.$consts.STORAGE_DEVICE_INFO_LIST_KEY;
				this.dataInfo.createTime = new Date().format(this.$consts.DATE_MASK)

				let list = app.globalData.deviceInfoList.filter(item=>{
					return item.imei!==this.dataInfo.imei
				})

				app.globalData.deviceInfoList = list
				app.globalData.deviceInfoList.push(this.dataInfo)

				uni.setStorage({
				    key: key,
				    data: app.globalData.deviceInfoList,
				    success: function () {
				        console.log('save data success');
				    }
				});
			},



			submitInfo() {
				const server = this.$config.serverUrl;
				const url = `${server}/mis/api/wechat/install`
				this.dataInfo.id = this.dataInfo.imei
				this.$http.post(url, this.dataInfo).then(res => {
					if (res.status === this.$consts.CODE_SUCCESS) {

						console.log(res)

						this.saveDeviceInfo();

						console.log(app.globalData.deviceInfoList)

						toast("报装成功")
						this.nav2Map(this.dataInfo.id)
					} else {
						console.log(res)
						toast("报装失败:" + res.msg)
					}

				}).catch(err => {
					console.log(err)
					toast("网络错误：" + err.errMsg)
				})


			},


			nav2Map(deviceId) {
				uni.reLaunch({
					url: "/pages/map/map?markerId=" + deviceId
				})
			},

			submitInstall() {
				if (!this.validate()) {
					return;
				}
				this.submitInfo();


			},

			validate() {


				if (!this.dataInfo.imei) {
					toast('设备IMEI为空')
					return false;
				}

				if (this.dataInfo.imei.length > 48) {

					toast('设备IMEI过长')
					return false;
				}



				if (!this.dataInfo.longitude) {
					toast('经度为空');
					return false;
				}


				if (!this.dataInfo.latitude) {
					toast('纬度为空')
					return false;
				}


				if (!this.dataInfo.address) {
					toast('地址信息为空')
					return false;
				}

				if (this.dataInfo.address.length > 100) {

					toast('地址信息过长')
					return false;
				}

				return true;

			}


		}
	}
</script>

<style lang="scss">
	.box {
		height: 100vh;
		background-color: $color-bg-primary;
	}

	.panel {
		background-color: $color-bg-primary;


		font-size: 30upx;

		color: $color-text-white;

		border-bottom: 1px solid $color-border-grey;




		.form {
			height: auto;

			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			&.qr-form{
				padding-top:20upx;
				padding-bottom:20upx;
			}
			/* &.padding{
				padding-top: 3px;
				padding-bottom: 3px;
			} */

			.form-inputs {
				flex: 7;

				&.v-center {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;

				}



				.item {
					box-sizing: border-box;
					background-color: $color-bg-primary;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 20upx 10upx;


					.title {
						text-align: right;
						min-width: calc(4em + 15px);
					}

					.input {
						padding-left: 20upx;
						padding-right: 20upx;
						height: 60upx;
						color: #000;
						text-align: left;
						background-color: $color-text-white;
						opacity: 0.8;
					}

					.area {
						background-color: $color-text-white;
						opacity: 0.8;
						padding: 20upx;
						color: #000;
						width: 48vw;
						height: 150upx;
					}
				}

				.images {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin: 3px;

					.image {
						margin: 3px;
						background-color: $color-bg-primary--light;
						width: calc(70vw / 3 - 6px);
						height: calc(70vw / 3 - 6px);

						&.hidden {
							display: none
						}
					}
				}


			}



			.form-btns {

				&.v-padding {
					padding-top: 5px;
					padding-bottom: 5px;
				}

				flex: 3;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.btn {
					background-color: $color-bg-primary--lighter;
					opacity: 0.9;
					width: 20vw;
					height: 20vw;
					display: flex;
					align-items: center;
					justify-content: center;
					color: $color-text-grey;

					&:active {
						box-shadow: 0 0 1px 1px $color-border-blue;

					}

				}



			}


		}

	}

	.btns {
		text-align: center;

		.link-btn {
			width: 90%;

			background-color: $color-bg-primary--lighter;
			border: 1px solid $color-border-blue;
			color: $color-text-white;


		}
	}
</style>
